<template>
  <div>
    <div class="selectbox" v-if="ischoose">
      <span>已选择</span><span class="selectnum">{{ num }}</span><span>项</span> 
      <span @click="clearmultipleSelection()" class="clearselect">清空</span>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      ref="multipleTable"
      tooltip-effect="dark"
      
    >
      <el-table-column type="selection" width="55" v-if="isSelection"></el-table-column>
      <el-table-column type="index" width="55" v-if="isNum"></el-table-column>
      <el-table-column
      show-overflow-tooltip
        v-for="(item, index) in headerData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        header-align="center"
        align="center"
        :sortable="item.sortable"
      >
        <template slot-scope="scope">
          <div v-if="item.slot">
            <slot :name="item.prop" v-bind:row="scope.row"></slot>
          </div>
          <div v-if="!item.slot"   class="textobe">
            {{ tableData[scope.$index][item.prop] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column

        label="操作"
        :width="160"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <slot name="operationBtn" v-bind:operationData="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-if="paginationStyle"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentpage"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      class="paging"
    >
    </el-pagination>
  </div>
</template>

<script>

export default {
  name: "tableList",
  data() {
    return {};
  },

  methods: {
    handleSelectionChange(val) {
      let _self = this;
      // this.multipleSelection = val;
      // console.log(_self.$refs.multipleTable);
      _self.$emit("SelectionChange", val);
    },
    handleSizeChange(val) {
      let _self = this;
      _self.$emit("SizeChange", val);
    },
    handleCurrentChange(val) {
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
    clearmultipleSelection() {
      let _self = this;
      _self.$refs.multipleTable.clearSelection();
      // _self.$emit("clearmultipleSelection", val);
    },
  },

  props: {
    ischoose: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    dialog: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    num: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    // 是否显示分页
    paginationStyle: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 选中列表
    multipleSelection: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //表格列表传递过来的数据
    tableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 表头数据
    headerData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 当前第几页
    currentpage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    // 一页多少条
    pagesize: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    //总条数
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
    // 左侧选框
    isSelection:{
      type:Boolean,
      default:()=>{
        return true;
      }
    },
    // 左侧排序
    isNum:{
      type:Boolean,
      default:()=>{
        return false;
      }
    }
  },
};
</script>

<style>
.paging {
  margin-top: 10px;
  text-align: right;
}
.selectbox {
  height: 40px;
  line-height: 40px;
  margin-top: -10px;
  margin-bottom: 15px;
  background-color: #e6f7ff;
  padding-left: 30px;
  font-size: 14px;
}
.selectnum{
  color: #18ACFF;
  margin-left: 5px;
  margin-right: 5px;
}
.clearselect{
  margin-left: 30px;
  color: #18ACFF;
  cursor: pointer;
}
.el-table td.el-table__cell .textobe{
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.el-tooltip__popper{
  width: 400px;
}
</style>